<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>响应式 | 静思田园</title>
    <meta name="description" content="时不时记录一点点">
    <meta name="generator" content="VitePress v1.5.0">
    <link rel="preload stylesheet" href="/assets/style.D1KHeDuB.css" as="style">
    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
    <script type="module" src="/assets/chunks/metadata.d4b76d32.js"></script>
    <script type="module" src="/assets/app.Cqoht_Of.js"></script>
    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/assets/chunks/framework.trnLO_3_.js">
    <link rel="modulepreload" href="/assets/chunks/theme.BNMYWj-o.js">
    <link rel="modulepreload" href="/assets/chunks/katex.BZy9Y_85.js">
    <link rel="modulepreload" href="/assets/chunks/c4Diagram-3d4e48cf.rhyfUO3k.js">
    <link rel="modulepreload" href="/assets/chunks/flowDiagram-66a62f08.BvVfKYLl.js">
    <link rel="modulepreload" href="/assets/chunks/flowDiagram-v2-96b9c2cf.rYAPEXyw.js">
    <link rel="modulepreload" href="/assets/chunks/erDiagram-9861fffd.CQSbaoJM.js">
    <link rel="modulepreload" href="/assets/chunks/gitGraphDiagram-72cf32ee.CjLmC8RV.js">
    <link rel="modulepreload" href="/assets/chunks/ganttDiagram-c361ad54.R_V-FeK5.js">
    <link rel="modulepreload" href="/assets/chunks/infoDiagram-f8f76790.C-2Va9KZ.js">
    <link rel="modulepreload" href="/assets/chunks/pieDiagram-8a3498a8.B9ZVkD7K.js">
    <link rel="modulepreload" href="/assets/chunks/quadrantDiagram-120e2f19.BuonnDHi.js">
    <link rel="modulepreload" href="/assets/chunks/xychartDiagram-e933f94c.C_bIYaUn.js">
    <link rel="modulepreload" href="/assets/chunks/requirementDiagram-deff3bca.RFVzvdjl.js">
    <link rel="modulepreload" href="/assets/chunks/sequenceDiagram-704730f1.UZWxMlyq.js">
    <link rel="modulepreload" href="/assets/chunks/classDiagram-70f12bd4.sipmPMFa.js">
    <link rel="modulepreload" href="/assets/chunks/classDiagram-v2-f2320105.CDkLxQ0T.js">
    <link rel="modulepreload" href="/assets/chunks/stateDiagram-587899a1.CD2ocVZB.js">
    <link rel="modulepreload" href="/assets/chunks/stateDiagram-v2-d93cdb3a.D0qUPm3J.js">
    <link rel="modulepreload" href="/assets/chunks/journeyDiagram-49397b02.CeUUZA2l.js">
    <link rel="modulepreload" href="/assets/chunks/flowchart-elk-definition-4a651766.DkdgpMTf.js">
    <link rel="modulepreload" href="/assets/chunks/timeline-definition-85554ec2.WL9yxus9.js">
    <link rel="modulepreload" href="/assets/chunks/mindmap-definition-fc14e90a.CWC2bxmB.js">
    <link rel="modulepreload" href="/assets/chunks/sankeyDiagram-04a897e0.BXj8OViR.js">
    <link rel="modulepreload" href="/assets/chunks/blockDiagram-38ab4fdb.CPVnJXk5.js">
    <link rel="modulepreload" href="/assets/chunks/virtual_mermaid-config.DDnGl6nM.js">
    <link rel="modulepreload" href="/assets/frontend_css_响应式.md.CNbJPrA7.lean.js">
    <meta name="application-name" content="VuePress">
    <meta name="apple-mobile-web-app-title" content="静思田园">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileColor" content="#3eaf7c">
    <meta name="theme-color" content="#646cff">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-8426fc1a><!--]--><span data-v-1168a8e4>静思田园</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57></span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/network/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>网络工程师</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/frontend/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>前端</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/English/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>English</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/Scrupy/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>爬虫</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/backend/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>后端</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/bigdata/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>大数据</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/computer/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>计算机基础</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/database/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>数据库</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/docker/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>dorker</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/git/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Git</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/nodejs/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Node.js</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/python/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Python</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/shell/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>shell</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tools/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>工具</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/loveagri" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://gitee.com/loveagri" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>码云</title><path d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.592.592 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296Z"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/loveagri" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://gitee.com/loveagri" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>码云</title><path d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.592.592 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296Z"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-17a5e62e><button data-v-17a5e62e>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b7550ba0><div class="item" role="button" tabindex="0" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><h2 class="text" data-v-b7550ba0>CSS</h2><!----></div><div class="items" data-v-b7550ba0><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>CSS</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/css%E5%9F%BA%E7%A1%80.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>基础知识</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E5%8F%98%E5%BD%A2%E5%8A%A8%E7%94%BB.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>变形动画</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E5%93%8D%E5%BA%94%E5%BC%8F.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>响应式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>媒体查询</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E5%AE%9A%E4%BD%8D%E5%B8%83%E5%B1%80.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>定位布局</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E5%B8%A7%E5%8A%A8%E7%94%BB.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>帧动画</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>弹性布局</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E6%95%B0%E6%8D%AE%E6%A0%B7%E5%BC%8F.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>数据样式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E6%96%87%E6%9C%AC.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>文本</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E6%A0%85%E6%A0%BC%E7%B3%BB%E7%BB%9F.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>栅格系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>浮动布局</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>盒子模型</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E8%83%8C%E6%99%AF.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>背景</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b7550ba0 data-v-b7550ba0><div class="item" data-v-b7550ba0><div class="indicator" data-v-b7550ba0></div><a class="VPLink link link" href="/frontend/css/%E9%80%89%E6%8B%A9%E5%99%A8.html" data-v-b7550ba0><!--[--><p class="text" data-v-b7550ba0>选择器</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>目录</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _frontend_css_%E5%93%8D%E5%BA%94%E5%BC%8F" data-v-39a288b8><div><h1 id="响应式" tabindex="-1">响应式 <a class="header-anchor" href="#响应式" aria-label="Permalink to &quot;响应式&quot;">​</a></h1><table tabindex="0"><thead><tr><th>网站</th><th>描述</th></tr></thead><tbody><tr><td><a href="https://www.bilibili.com/video/BV1vf4y197nh/?p=11&amp;vd_source=30ff36ceecea6590878b11480a681103" target="_blank" rel="noreferrer">移动端开发</a></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table><h2 id="基础概念" tabindex="-1">基础概念 <a class="header-anchor" href="#基础概念" aria-label="Permalink to &quot;基础概念&quot;">​</a></h2><p><strong>px(pixels)</strong>：物理像素，硬件像素，设备像素。</p><p><strong>dp,dip</strong>(deveice independent pixels)：逻辑像素、设备无关像素、CSS像素。如Chrome浏览器移动模式下的像素值。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#E5C07B;">window</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">screen</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">width</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><strong>dpr</strong>（设备像素比）：是电子设备中用于关联物理像素和逻辑像素的概念。物理像素是设备固有的，而逻辑像素则是程序使用的虚拟像素。两者通过DPR（设备像素比）关联‌；设备像素缩放比，即 1dp的长度相当于几个px的长度。可以通过<code>window.devicePixelRatio</code>，获取手机设备的dpr。如iPhone6/7/8 Plus的物理像素（分辨率）为<code>1080*1920</code>，在开发者工具里看到的是<code>414*736</code>，dpr为3，这样计算结果实际物理像素应该为1242*2208，由此可以看来iPhone实际上是把1<code>242*2208</code>硬塞入<code>1080*1920</code>里。</p><p><strong>ppi,dpi</strong>：像素密度(像素每英寸)，斜向一英寸里的物理像像素量。</p><mjx-container tabindex="0" class="MathJax" jax="SVG" display="true" style="direction:ltr;display:block;text-align:center;margin:1em 0;position:relative;"><svg style="overflow:visible;min-height:1px;min-width:1px;vertical-align:-2.538ex;" xmlns="http://www.w3.org/2000/svg" width="35.194ex" height="6.923ex" role="img" focusable="false" viewBox="0 -1938.2 15555.6 3060" aria-hidden="true"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="msqrt"><g transform="translate(1020,0)"><g data-mml-node="mfrac"><g data-mml-node="mrow" transform="translate(220,676)"><g data-mml-node="mi"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">水</text></g><g data-mml-node="mi" transform="translate(1000,0)"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">平</text></g><g data-mml-node="mi" transform="translate(2000,0)"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">像</text></g><g data-mml-node="mi" transform="translate(3000,0)"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">素</text></g><g data-mml-node="mi" transform="translate(4000,0)"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">点</text></g><g data-mml-node="msup" transform="translate(5000,0)"><g data-mml-node="mi"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">数</text></g><g data-mml-node="mn" transform="translate(1033,289) scale(0.707)"><path data-c="32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z" style="stroke-width:3;"></path></g></g><g data-mml-node="mo" transform="translate(6658.8,0)"><path data-c="2B" d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z" style="stroke-width:3;"></path></g><g data-mml-node="mi" transform="translate(7659,0)"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">垂</text></g><g data-mml-node="mi" transform="translate(8659,0)"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">直</text></g><g data-mml-node="mi" transform="translate(9659,0)"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">像</text></g><g data-mml-node="mi" transform="translate(10659,0)"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">素</text></g><g data-mml-node="mi" transform="translate(11659,0)"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">点</text></g><g data-mml-node="msup" transform="translate(12659,0)"><g data-mml-node="mi"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">数</text></g><g data-mml-node="mn" transform="translate(1033,289) scale(0.707)"><path data-c="32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z" style="stroke-width:3;"></path></g></g></g><g data-mml-node="mrow" transform="translate(5267.8,-710)"><g data-mml-node="mi"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">英</text></g><g data-mml-node="mi" transform="translate(1000,0)"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">寸</text></g><g data-mml-node="mi" transform="translate(2000,0)"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">尺</text></g><g data-mml-node="mi" transform="translate(3000,0)"><text data-variant="normal" transform="scale(1,-1)" font-size="884px" font-family="serif">寸</text></g></g><rect width="14295.6" height="60" x="120" y="220"></rect></g></g><g data-mml-node="mo" transform="translate(0,128.2)"><path data-c="221A" d="M983 1739Q988 1750 1001 1750Q1008 1750 1013 1745T1020 1733Q1020 1726 742 244T460 -1241Q458 -1250 439 -1250H436Q424 -1250 424 -1248L410 -1166Q395 -1083 367 -920T312 -601L201 44L137 -83L111 -57L187 96L264 247Q265 246 369 -357Q470 -958 473 -963L727 384Q979 1729 983 1739Z" style="stroke-width:3;"></path></g><rect width="14535.6" height="60" x="1020" y="1818.2"></rect></g></g></g></svg><mjx-assistive-mml unselectable="on" display="block" style="top:0px;left:0px;clip:rect(1px, 1px, 1px, 1px);-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;padding:1px 0px 0px 0px;border:0px;display:block;overflow:hidden;width:100%;"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><msqrt><mfrac><mrow><mi mathvariant="normal">水</mi><mi mathvariant="normal">平</mi><mi mathvariant="normal">像</mi><mi mathvariant="normal">素</mi><mi mathvariant="normal">点</mi><msup><mi mathvariant="normal">数</mi><mn>2</mn></msup><mo>+</mo><mi mathvariant="normal">垂</mi><mi mathvariant="normal">直</mi><mi mathvariant="normal">像</mi><mi mathvariant="normal">素</mi><mi mathvariant="normal">点</mi><msup><mi mathvariant="normal">数</mi><mn>2</mn></msup></mrow><mrow><mi mathvariant="normal">英</mi><mi mathvariant="normal">寸</mi><mi mathvariant="normal">尺</mi><mi mathvariant="normal">寸</mi></mrow></mfrac></msqrt></math></mjx-assistive-mml></mjx-container><p>如iPhone6的ppi为<mjx-container class="MathJax" jax="SVG" style="direction:ltr;position:relative;"><svg style="overflow:visible;min-height:1px;min-width:1px;vertical-align:-1.141ex;" xmlns="http://www.w3.org/2000/svg" width="19.715ex" height="4.208ex" role="img" focusable="false" viewBox="0 -1355.6 8713.9 1860" aria-hidden="true"><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="scale(1,-1)"><g data-mml-node="math"><g data-mml-node="msqrt"><g transform="translate(1020,0)"><g data-mml-node="mfrac"><g data-mml-node="mrow" transform="translate(220,398) scale(0.707)"><g data-mml-node="msup"><g data-mml-node="mn"><path data-c="31" d="M213 578L200 573Q186 568 160 563T102 556H83V602H102Q149 604 189 617T245 641T273 663Q275 666 285 666Q294 666 302 660V361L303 61Q310 54 315 52T339 48T401 46H427V0H416Q395 3 257 3Q121 3 100 0H88V46H114Q136 46 152 46T177 47T193 50T201 52T207 57T213 61V578Z" style="stroke-width:3;"></path><path data-c="33" d="M127 463Q100 463 85 480T69 524Q69 579 117 622T233 665Q268 665 277 664Q351 652 390 611T430 522Q430 470 396 421T302 350L299 348Q299 347 308 345T337 336T375 315Q457 262 457 175Q457 96 395 37T238 -22Q158 -22 100 21T42 130Q42 158 60 175T105 193Q133 193 151 175T169 130Q169 119 166 110T159 94T148 82T136 74T126 70T118 67L114 66Q165 21 238 21Q293 21 321 74Q338 107 338 175V195Q338 290 274 322Q259 328 213 329L171 330L168 332Q166 335 166 348Q166 366 174 366Q202 366 232 371Q266 376 294 413T322 525V533Q322 590 287 612Q265 626 240 626Q208 626 181 615T143 592T132 580H135Q138 579 143 578T153 573T165 566T175 555T183 540T186 520Q186 498 172 481T127 463Z" transform="translate(500,0)" style="stroke-width:3;"></path><path data-c="33" d="M127 463Q100 463 85 480T69 524Q69 579 117 622T233 665Q268 665 277 664Q351 652 390 611T430 522Q430 470 396 421T302 350L299 348Q299 347 308 345T337 336T375 315Q457 262 457 175Q457 96 395 37T238 -22Q158 -22 100 21T42 130Q42 158 60 175T105 193Q133 193 151 175T169 130Q169 119 166 110T159 94T148 82T136 74T126 70T118 67L114 66Q165 21 238 21Q293 21 321 74Q338 107 338 175V195Q338 290 274 322Q259 328 213 329L171 330L168 332Q166 335 166 348Q166 366 174 366Q202 366 232 371Q266 376 294 413T322 525V533Q322 590 287 612Q265 626 240 626Q208 626 181 615T143 592T132 580H135Q138 579 143 578T153 573T165 566T175 555T183 540T186 520Q186 498 172 481T127 463Z" transform="translate(1000,0)" style="stroke-width:3;"></path><path data-c="34" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z" transform="translate(1500,0)" style="stroke-width:3;"></path></g><g data-mml-node="mn" transform="translate(2033,404.1) scale(0.707)"><path data-c="32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z" style="stroke-width:3;"></path></g></g><g data-mml-node="mo" transform="translate(2436.6,0)"><path data-c="2B" d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z" style="stroke-width:3;"></path></g><g data-mml-node="msup" transform="translate(3214.6,0)"><g data-mml-node="mn"><path data-c="37" d="M55 458Q56 460 72 567L88 674Q88 676 108 676H128V672Q128 662 143 655T195 646T364 644H485V605L417 512Q408 500 387 472T360 435T339 403T319 367T305 330T292 284T284 230T278 162T275 80Q275 66 275 52T274 28V19Q270 2 255 -10T221 -22Q210 -22 200 -19T179 0T168 40Q168 198 265 368Q285 400 349 489L395 552H302Q128 552 119 546Q113 543 108 522T98 479L95 458V455H55V458Z" style="stroke-width:3;"></path><path data-c="35" d="M164 157Q164 133 148 117T109 101H102Q148 22 224 22Q294 22 326 82Q345 115 345 210Q345 313 318 349Q292 382 260 382H254Q176 382 136 314Q132 307 129 306T114 304Q97 304 95 310Q93 314 93 485V614Q93 664 98 664Q100 666 102 666Q103 666 123 658T178 642T253 634Q324 634 389 662Q397 666 402 666Q410 666 410 648V635Q328 538 205 538Q174 538 149 544L139 546V374Q158 388 169 396T205 412T256 420Q337 420 393 355T449 201Q449 109 385 44T229 -22Q148 -22 99 32T50 154Q50 178 61 192T84 210T107 214Q132 214 148 197T164 157Z" transform="translate(500,0)" style="stroke-width:3;"></path><path data-c="30" d="M96 585Q152 666 249 666Q297 666 345 640T423 548Q460 465 460 320Q460 165 417 83Q397 41 362 16T301 -15T250 -22Q224 -22 198 -16T137 16T82 83Q39 165 39 320Q39 494 96 585ZM321 597Q291 629 250 629Q208 629 178 597Q153 571 145 525T137 333Q137 175 145 125T181 46Q209 16 250 16Q290 16 318 46Q347 76 354 130T362 333Q362 478 354 524T321 597Z" transform="translate(1000,0)" style="stroke-width:3;"></path></g><g data-mml-node="mn" transform="translate(1533,403.1) scale(0.707)"><path data-c="32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z" style="stroke-width:3;"></path></g></g></g><g data-mml-node="mn" transform="translate(1589.4,-345) scale(0.707)"><path data-c="34" d="M462 0Q444 3 333 3Q217 3 199 0H190V46H221Q241 46 248 46T265 48T279 53T286 61Q287 63 287 115V165H28V211L179 442Q332 674 334 675Q336 677 355 677H373L379 671V211H471V165H379V114Q379 73 379 66T385 54Q393 47 442 46H471V0H462ZM293 211V545L74 212L183 211H293Z" style="stroke-width:3;"></path><path data-c="2E" d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z" transform="translate(500,0)" style="stroke-width:3;"></path><path data-c="37" d="M55 458Q56 460 72 567L88 674Q88 676 108 676H128V672Q128 662 143 655T195 646T364 644H485V605L417 512Q408 500 387 472T360 435T339 403T319 367T305 330T292 284T284 230T278 162T275 80Q275 66 275 52T274 28V19Q270 2 255 -10T221 -22Q210 -22 200 -19T179 0T168 40Q168 198 265 368Q285 400 349 489L395 552H302Q128 552 119 546Q113 543 108 522T98 479L95 458V455H55V458Z" transform="translate(778,0)" style="stroke-width:3;"></path></g><rect width="3842.4" height="60" x="120" y="220"></rect></g></g><g data-mml-node="mo" transform="translate(0,145.6)"><path data-c="221A" d="M1001 1150Q1017 1150 1020 1132Q1020 1127 741 244L460 -643Q453 -650 436 -650H424Q423 -647 423 -645T421 -640T419 -631T415 -617T408 -594T399 -560T385 -512T367 -448T343 -364T312 -259L203 119L138 41L111 67L212 188L264 248L472 -474L983 1140Q988 1150 1001 1150Z" style="stroke-width:3;"></path></g><rect width="4082.4" height="60" x="1020" y="1235.6"></rect></g><g data-mml-node="mo" transform="translate(5380.2,0)"><path data-c="3D" d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z" style="stroke-width:3;"></path></g><g data-mml-node="mn" transform="translate(6435.9,0)"><path data-c="33" d="M127 463Q100 463 85 480T69 524Q69 579 117 622T233 665Q268 665 277 664Q351 652 390 611T430 522Q430 470 396 421T302 350L299 348Q299 347 308 345T337 336T375 315Q457 262 457 175Q457 96 395 37T238 -22Q158 -22 100 21T42 130Q42 158 60 175T105 193Q133 193 151 175T169 130Q169 119 166 110T159 94T148 82T136 74T126 70T118 67L114 66Q165 21 238 21Q293 21 321 74Q338 107 338 175V195Q338 290 274 322Q259 328 213 329L171 330L168 332Q166 335 166 348Q166 366 174 366Q202 366 232 371Q266 376 294 413T322 525V533Q322 590 287 612Q265 626 240 626Q208 626 181 615T143 592T132 580H135Q138 579 143 578T153 573T165 566T175 555T183 540T186 520Q186 498 172 481T127 463Z" style="stroke-width:3;"></path><path data-c="32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z" transform="translate(500,0)" style="stroke-width:3;"></path><path data-c="35" d="M164 157Q164 133 148 117T109 101H102Q148 22 224 22Q294 22 326 82Q345 115 345 210Q345 313 318 349Q292 382 260 382H254Q176 382 136 314Q132 307 129 306T114 304Q97 304 95 310Q93 314 93 485V614Q93 664 98 664Q100 666 102 666Q103 666 123 658T178 642T253 634Q324 634 389 662Q397 666 402 666Q410 666 410 648V635Q328 538 205 538Q174 538 149 544L139 546V374Q158 388 169 396T205 412T256 420Q337 420 393 355T449 201Q449 109 385 44T229 -22Q148 -22 99 32T50 154Q50 178 61 192T84 210T107 214Q132 214 148 197T164 157Z" transform="translate(1000,0)" style="stroke-width:3;"></path><path data-c="2E" d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z" transform="translate(1500,0)" style="stroke-width:3;"></path><path data-c="36" d="M42 313Q42 476 123 571T303 666Q372 666 402 630T432 550Q432 525 418 510T379 495Q356 495 341 509T326 548Q326 592 373 601Q351 623 311 626Q240 626 194 566Q147 500 147 364L148 360Q153 366 156 373Q197 433 263 433H267Q313 433 348 414Q372 400 396 374T435 317Q456 268 456 210V192Q456 169 451 149Q440 90 387 34T253 -22Q225 -22 199 -14T143 16T92 75T56 172T42 313ZM257 397Q227 397 205 380T171 335T154 278T148 216Q148 133 160 97T198 39Q222 21 251 21Q302 21 329 59Q342 77 347 104T352 209Q352 289 347 316T329 361Q302 397 257 397Z" transform="translate(1778,0)" style="stroke-width:3;"></path></g></g></g></svg><mjx-assistive-mml unselectable="on" display="inline" style="top:0px;left:0px;clip:rect(1px, 1px, 1px, 1px);-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;padding:1px 0px 0px 0px;border:0px;display:block;width:auto;overflow:hidden;"><math xmlns="http://www.w3.org/1998/Math/MathML"><msqrt><mfrac><mrow><msup><mn>1334</mn><mn>2</mn></msup><mo>+</mo><msup><mn>750</mn><mn>2</mn></msup></mrow><mn>4.7</mn></mfrac></msqrt><mo>=</mo><mn>325.6</mn></math></mjx-assistive-mml></mjx-container>,那么它的每英寸为325个像素点，即ppi为325。</p><p><strong>Retina屏(视网膜屏)</strong>: ppi 大于320。</p><p><strong>em</strong>: 相对于父元素的font-size的相对单位。</p><p><strong>rem</strong>: 相对于根元素的font-size的相对单位。</p><h3 id="视口-viewpoint" tabindex="-1">视口（viewpoint） <a class="header-anchor" href="#视口-viewpoint" aria-label="Permalink to &quot;视口（viewpoint）&quot;">​</a></h3><p>就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口、理想视口。</p><h5 id="布局视口-layout-viewpoint-不适合做手机页面开发" tabindex="-1">布局视口：layout viewpoint（不适合做手机页面开发） <a class="header-anchor" href="#布局视口-layout-viewpoint-不适合做手机页面开发" aria-label="Permalink to &quot;布局视口：layout viewpoint（不适合做手机页面开发）&quot;">​</a></h5><p>一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的pc端页面在手机上显示的问题。Ios、Android基本都是将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上显示，只不过元素看上去很小，一般默认可以通过手机缩放网页。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#E5C07B;">document</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">documentElement</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">clientWidth</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h5 id="视觉视口-visual-viewpoint" tabindex="-1">视觉视口：visual viewpoint： <a class="header-anchor" href="#视觉视口-visual-viewpoint" aria-label="Permalink to &quot;视觉视口：visual viewpoint：&quot;">​</a></h5><p>字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。我们可以通过缩放去操作视觉视口，但是不会影响布局视口，布局视口仍保持原来的宽度。</p><h5 id="理想视口-ideal-viewpoint" tabindex="-1">理想视口：ideal viewpoint： <a class="header-anchor" href="#理想视口-ideal-viewpoint" aria-label="Permalink to &quot;理想视口：ideal viewpoint：&quot;">​</a></h5><p>为了使网站在移动端有理想的浏览和阅读宽度而设定理想视口，对设备来说，是最理想的视口尺寸需要手动添加meta视口标签通知浏览操作Meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽。</p><ol><li>视口就是浏览器显示页面内容的屏幕区域</li><li>视口分为布局视口、视觉视口和理想视口</li><li>我们移动端布局想要的是理想视口，就是手机屏幕有多宽，我们的布局视口就有多宽</li><li>想要理想视口，我们需要给我们的移动端页面添加meta视口标签</li></ol><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#E5C07B;">window</span><span style="color:#ABB2BF;">.</span><span style="color:#E5C07B;">screen</span><span style="color:#ABB2BF;">.</span><span style="color:#E06C75;">width</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h5 id="meta视口标签" tabindex="-1">Meta视口标签： <a class="header-anchor" href="#meta视口标签" aria-label="Permalink to &quot;Meta视口标签：&quot;">​</a></h5><p>桌面浏览器设置viewport无效，但可以手动缩放。移动浏览器设置viewport有效，但也能手动缩放。</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">meta</span><span style="color:#D19A66;"> name</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">”viewpoint”</span><span style="color:#D19A66;"> content</span><span style="color:#ABB2BF;">=</span><span style="color:#98C379;">”width</span><span style="color:#FFFFFF;">=</span><span style="color:#98C379;">device-width,user-scalable</span><span style="color:#FFFFFF;">=</span><span style="color:#98C379;">no,initial-scale</span><span style="color:#FFFFFF;">=</span><span style="color:#98C379;">1.0,maximum-scale</span><span style="color:#FFFFFF;">=</span><span style="color:#98C379;">1.0,minimum</span><span style="color:#FFFFFF;">=</span><span style="color:#98C379;">1.0”</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF;">&lt;</span><span style="color:#E06C75;">style</span><span style="color:#ABB2BF;">&gt;</span></span>
<span class="line"><span style="color:#C678DD;">   @media</span><span style="color:#ABB2BF;"> (min-device-pixel-ratio: </span><span style="color:#D19A66;">3</span><span style="color:#ABB2BF;">) {    }</span></span>
<span class="line"><span style="color:#ABB2BF;">&lt;/</span><span style="color:#E06C75;">style</span><span style="color:#ABB2BF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><code>device-width</code>和<code>initial-scale</code>可以理解为作用一样，都是控制理想视口与设备尺寸的关系的，即设置初始状态，理想视口宽度为设备的dp。</p><p>适配属性</p><div class="language-sh line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#61AFEF;">screenSize</span><span style="color:#98C379;"> =</span><span style="color:#D19A66;"> 1440</span><span style="color:#E5C07B;"> *</span><span style="color:#D19A66;"> 2560</span><span style="color:#98C379;"> ,</span><span style="color:#98C379;">  screenDensity</span><span style="color:#98C379;"> =</span><span style="color:#98C379;"> 4,</span><span style="color:#98C379;"> dp</span><span style="color:#98C379;"> =</span><span style="color:#D19A66;"> 360</span><span style="color:#E5C07B;"> *</span><span style="color:#D19A66;"> 640</span></span>
<span class="line"><span style="color:#61AFEF;">screenSize</span><span style="color:#98C379;"> =</span><span style="color:#D19A66;"> 1080</span><span style="color:#E5C07B;"> *</span><span style="color:#D19A66;"> 1920</span><span style="color:#98C379;"> ,</span><span style="color:#98C379;">  screenDensity</span><span style="color:#98C379;"> =</span><span style="color:#98C379;"> 3,</span><span style="color:#98C379;"> dp</span><span style="color:#98C379;"> =</span><span style="color:#D19A66;"> 360</span><span style="color:#E5C07B;"> *</span><span style="color:#D19A66;"> 640</span></span>
<span class="line"><span style="color:#61AFEF;">screenSize</span><span style="color:#98C379;"> =</span><span style="color:#D19A66;"> 720</span><span style="color:#E5C07B;"> *</span><span style="color:#D19A66;"> 1280</span><span style="color:#98C379;"> ,</span><span style="color:#98C379;">  screenDensity</span><span style="color:#98C379;"> =</span><span style="color:#98C379;"> 2,</span><span style="color:#98C379;"> dp</span><span style="color:#98C379;"> =</span><span style="color:#D19A66;"> 360</span><span style="color:#E5C07B;"> *</span><span style="color:#D19A66;"> 640</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="移动端原生" tabindex="-1">移动端原生 <a class="header-anchor" href="#移动端原生" aria-label="Permalink to &quot;移动端原生&quot;">​</a></h3><p>IOS用的单位为<code>pt</code>，Android为<code>dp</code>都是使用的设备独立像素。</p><h2 id="计算根元素font-size" tabindex="-1">计算根元素font-size <a class="header-anchor" href="#计算根元素font-size" aria-label="Permalink to &quot;计算根元素font-size&quot;">​</a></h2><p>设计稿为 375px 宽，下面公式表示 1px 所占的屏幕尺寸宽度，有以下几点需要说明</p><ul><li>100vw 表示 100%视口宽度</li><li>因为使用了 vw 宽度系统会根据不同设备自动计算 rem</li></ul><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki one-dark-pro vp-code" style="background-color:#282c34;color:#abb2bf;" tabindex="0"><code><span class="line"><span style="color:#56B6C2;">:root</span><span style="color:#ABB2BF;"> {</span></span>
<span class="line"><span style="color:#ABB2BF;">  font-size: </span><span style="color:#56B6C2;">calc</span><span style="color:#ABB2BF;">(</span><span style="color:#D19A66;">100</span><span style="color:#E06C75;">vw</span><span style="color:#56B6C2;"> /</span><span style="color:#D19A66;"> 375</span><span style="color:#ABB2BF;">);</span></span>
<span class="line"><span style="color:#ABB2BF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新: <time datetime="2024-12-30T14:20:32.000Z" data-v-e98dd255></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/frontend/css/%E5%8F%98%E5%BD%A2%E5%8A%A8%E7%94%BB.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>上一篇</span><span class="title" data-v-e257564d>变形动画</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/frontend/css/%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>下一篇</span><span class="title" data-v-e257564d>媒体查询</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    
    
  </body>
</html>